<template>
    <div class="login-container">
        <div class="container-fluid flex-box ">
            <div class="reg-page" autocomplete="off">
                <div class="reg-header">
                    <h2>MeiKTV门店运营管理系统</h2>
                </div>
                <div class="input-group">
                    <el-input  placeholder="账号"  v-model="username"  clearable></el-input>
                    <!-- <input type="text" id="username" autocomplete="off" name="username" v-model="username" @click="inputFocus" />
                    <p :class="u_name_on ? ' addP ' : '' ">账号</p> -->
                </div>
                <div class="input-group">
                    <!-- <input type="text" id="password" name="password" onfocus='changeText(this.id)' onkeyup='this.type="password"' autocomplete='off' onclick='changeText(this.id)' autocomplete="off"/> -->
                    <!-- <input type="password" id="password" name="password" readonly onfocus="this.removeAttribute('readonly');"/> -->
                    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                    <!-- <input autocomplete="off" type="password" id="password" v-model="password" @click="inputFocus1" />
                    <input id="hiddenInput" type="text" style="display: none">
                    <p :class="u_password_on ? ' addP ' : '' " >密码</p> -->
                </div>

                <div class="input-group">
                    <button class="btn btnLogin" @click="login">登录</button>
                </div>
                <p class="alert alert-danger" role="alert"></p>
            </div>

        </div>



    </div>
</template>
<style lang="scss" scoped>

.login-container{
    background: rgb(38, 43, 55);
    height: 100%;
    .container-fluid {
        height: 100%;
        .reg-page {
            width: 100%;
            max-width: 440px;
            border-radius: 10px;
            background: #fff;
            overflow: hidden;
            padding-bottom: 76px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            .reg-header {
                text-align: center;
                background: rgb(23, 27, 36);
                color: #fff;
                h2 {
                    margin: 0;
                    height: 66px;
                    line-height: 66px;
                    font-size: 16px;
                }
            }
            .input-group {
                width: 100%;
                max-width: 293px;
                margin: 0 auto;
                height: 34px;
                margin-top: 76px;
                position: relative;
                input {
                    /* border: none;
                    border-bottom: 1px solid #e5e5e5 */
                    background: none;
                    display: block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    font-size: 14px;
                    border: none;
                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
                    z-index: 2;
                    color: rgb(38, 43, 55);
                    outline: none
                }
                input:focus .placeholder {
                    color: Red;
                    outline: none
                }
                p {
                    width: 100%;
                    height: 100%;
                    line-height: 34px;
                    position: absolute;
                    color: rgba(38, 43, 55, 0.5);
                    font-size: 14px;
                    z-index: 1;
                    transition: all 0.5s;
                    -webkit-transition: all 0.5s;
                    margin: 0;
                }
                .addP{
                    transform: translateY(-25px);
                    font-size: 12px
                }
                .btnLogin {
                    width: 100%;
                    height: 44px;
                    text-align: center;
                    line-height: 32px;
                    color: #fff;
                    border: none;
                    background: -moz-linear-gradient(left, rgba(94, 62, 235, 0.9), rgba(163, 135, 255, 0.9));
                    /*Mozilla*/
                    background: -webkit-gradient(linear, 0 50%, 100% 50%, from(rgba(94, 62, 235, 0.9)), to(rgba(163, 135, 235, 0.9)));
                    /*Old gradient for webkit*/
                    background: -webkit-linear-gradient(left, rgba(94, 62, 235, 0.9), rgba(163, 135, 235, 0.9));
                    /*new gradient for Webkit*/
                    background: -o-linear-gradient(left, rgba(94, 62, 235, 0.9), rgba(163, 135, 235, 0.9));
                    border-radius: 6px;
                }

                .btnLogin:hover,
                .btnLogin:active {
                    color: #fff;
                    outline: none;
                    background: -moz-linear-gradient(left, rgba(94, 62, 235, 1), rgba(163, 135, 255, 1));
                    /*Mozilla*/
                    background: -webkit-gradient(linear, 0 50%, 100% 50%, from(rgba(94, 62, 235, 1)), to(rgba(163, 135, 235, 1)));
                    /*Old gradient for webkit*/
                    background: -webkit-linear-gradient(left, rgba(94, 62, 235, 1), rgba(163, 135, 235, 1));
                    /*new gradient for Webkit*/
                    background: -o-linear-gradient(left, rgba(94, 62, 235, 1), rgba(163, 135, 235, 1));
                }

                .btnLogin:focus,
                .btnLogin:visited {
                    border: none;
                    outline: none !important;
                    color: #fff;
                }
                input:-webkit-autofill,
                textarea:-webkit-autofill,
                select:-webkit-autofill {
                    background-color: #fff !important;
                    background-image: none !important;
                    color: rgba(0, 0, 0, 0) !important;
                }
            }
            .alert-danger {
                display: none;
                max-width: 293px;
                margin: 10px auto 0;
            }

        }
    }

}

</style>
<script>
import {abc}  from "../../js/abc.js"
// console.log(abc.hostUrl)
var hostUrl = abc.hostUrl,once = true;
export default {
    data(){
        return {
            username:'',
            password:'',
            u_name_on:false,
            u_password_on:false
        }
    },
    methods:{
        login(){
            var href = 'v1/login/devicelogin?platform=operate';
            var data = {
                username: this.username,
                password: this.password
            }
            var _this = this
            this.$http.post(hostUrl+href, data,{emulateJSON: true}).then( (res_res) => {
                // console.log(res_res)
                var res = res_res.body;
                if(res.code == 200){
                    abc.setSession('token', res.data.token);
                    abc.setSession('user_id', res.data.user_id);
                    abc.setSession('store_id', res.data.store_id);
                    abc.setSession('menu_list', res.data.menu_list);
                    abc.setSession('store', res.data.store);
                    abc.setSession('thumb', res.data.thumb);
                    abc.setSession('username', res.data.username);
                    abc.setSession('name', res.data.name);
                    abc.setSession('store_key', res.data.store.store_key);
                    abc.setSession('store_name', res.data.store.name);
                    abc.setSession('store_type', res.data.store.store_type);
                    abc.setSession('del', 'no');
                    abc.setSession('params','?token=' + res.data.token + '&user_id=' + res.data.user_id + '&store_id=' + res.data.store_id + '&platform=operate');
                    _this.$router.push('/index')
                }else{
                    if(once){
                        _this.$notify.info({
                            title: '提示',
                            message: res.message
                        });   
                        once = false 
                    }
                    
                    // alert(res.message)
                }
            }, (err) => {
                _this.$notify.error({
                        title: '错误',
                        message: '系统错误，稍后尝试~devicelogin'
                    });
                // console.log(err)
            })
        }        
    },
    mounted(){
        if (IEVersion() == 1 || IEVersion() == 'edge') {
            $('.reg-page').hide();
            getGoogle()

        }
        function IEVersion() {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器 
            var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
            var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
            if (isIE || isIE11) {
                return 1
            } else if (isEdge) {
                return 'edge'; //edge
            } else {
                return -1; //不是ie浏览器 
            }
        }
    }

}
$(document).keydown(function(event) {
    if (event.keyCode == 13) {
        $('.btnLogin').trigger('click')
    }
});
</script> 